<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    img {
      width: 100px;
      height: 100px;
    }

    .active {
      background: red;
    }

    .bgcolor {
      color: blue;
    }

    .box {
      font-size: 30px;
    }

    /* .cover {
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.5);
      position: absolute;
      left: 0;
      top: 0;
    } */
  </style>
</head>

<body>
  <div id="app">
    <img :src="imgsrc" alt="">
    <a :href="myhref">百度</a>
    <!-- class 渲染 -->
    <!-- 数据控制 class的是否加载 -->
    <div :class="{'active':ac,'bgcolor':flag}">你好</div>
    <!-- 一起加载多个class -->
    <div :class="['box',mybgcolor,'active']">跑步呢啊</div>
    <!-- 三目判断class的是否加载 -->
    <div :class="flag?'active':''">哈哈哈哈哈</div>
    <!-- 三目加载动态数据 -->
    <div :class="flag?mybgcolor:myactive">吃辣条</div>
    <!-- style 渲染 -->
    <div style="color:red">style部分的渲染</div>
    <hr>
    <div :style="{color:myColor,fontSize:myfont}">样式的动态绑定</div>
    <div :style="[myStyle,myStyle2]">加入多个style</div>
    <div :style="flag?myStyle:myStyle2">明天去哪浪，明天去找老伴</div>
    <div :style="myStyle">明天去哪浪，明天去找老伴</div>
    <!-- 遮罩层 -->
    <div class="cover" :style="mycover" v-if="mycoverFlag">
      <button @click="move">点击改变位置</button>
      <button @click="mycoverFlag=false">关闭遮罩</button>
    </div>
    <button @click="mycoverFlag=true">点击显示遮罩</button>
  </div>
  <script src="./vue.js"></script>
  <script>
    // v-bind:属性="属性值"
    //可以绑定自带属性和自定义属性
    //class style  src  href checked disabled type  name value id 
    var vm = new Vue({
      el: "#app",
      data() {
        return {
          mycoverFlag: false,
          ac: true,
          flag: true,
          // 导入相对路径的图片  要使用require("路径")
          // imgsrc: './23998.jpg'// 错误
          // imgsrc: require("./23998.jpg")
          // 绝对路径
          mycover: {
            width: window.innerWidth + "px",
            height: window.innerHeight + "px",
            background: "rgba(0, 0, 0, 0.5)",
            position: "absolute",
            left: 0,
            top: 0,
          },
          myStyle: {
            color: "red",
            background: "skyblue"
          },
          myStyle2: {
            fontSize: "30px",
            fontFamily: "华文琥珀"
          },
          myfont: "30px",
          myColor: "#FF0",
          myactive: 'active',
          mybgcolor: 'bgcolor',
          myhref: "http://www.baidu.com",
          imgsrc: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608369613862&di=773ca740355fc4bcc3755409d0a1295a&imgtype=0&src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F1113%2F041620103S8%2F200416103S8-4-1200.jpg"
        }
      },
      methods: {
        move() {
          this.mycover.left = "200px"
        }
      },
    })




  </script>
</body>

</html>